<!-- <ma-crumb>
  <ma-crumb-item ma-href="#!/components">Components 组件</ma-crumb-item>
  <ma-crumb-item ma-href="#!/components/global">Global 全局</ma-crumb-item>
  <ma-crumb-item>Font 文字</ma-crumb-item>
</ma-crumb> -->
<ma-crumb-auto></ma-crumb-auto>
<div class="global-color-page">
  <div class="container" ma-full-container>
    <h2>Color 颜色</h2>
    <p>定义全局颜色变量</p>

    <h3>何时使用</h3>
    <p>在定义自己所开发部分的色值的时候可以引用</p>

    <h3>代码演示</h3>
    <div class="p colors">
      <div class="color black">$black<br/>#000000</div>
      <div class="color base">$base<br/>#323232</div>
      <div class="color grey">$grey<br/>#999999</div>
      <div class="color outlines">$outlines<br/>#CCCCCC</div>
      <div class="color shadow">$shadow<br/>#DDDDDD</div>
      <div class="color disabled">$disabled<br/>#E5E5E5</div>
      <div class="color hover">$hover<br/>#F5F5F5</div>
      <div class="color background">$background<br/>#F5F5F5</div>
      <div class="color white">$white<br/>#FFFFFF</div>
      <div class="color primary">$primary<br/>#FF74B9</div>
      <div class="color warning">$warning<br/>#F6A623</div>
      <div class="color success">$success<br/>#87D068</div>
      <div class="color danger">$danger<br/>#FF5073</div>
      <div class="color link">$link<br/>#34ABFF</div>
    </div>
  </div>
</div>
